<template>
	<view class="hwq-content">
		<navBar title="选择区间/站点"></navBar>
		<searchCom class="search-input" v-model="searchText" style="margin-top: 120rpx;" @enter="determine" @change="determine" @clear="clearVal"></searchCom>
		<scroll-view scroll-y="true" class="hwq-scroll-box hwq-is-search">
			<template v-for="item1 in data">
				<!-- :key="item1.id+'-0'" -->
				<view class="item-box" :key="item1.id" @click="clickItem(item1.id,0)">
					<view>{{`${item1.name}${item1.branchLineName ? '(' + item1.branchLineName + ')' : ''}`  || ""}}</view>
					<view class="ico-box">
						<u-icon :name="showItem(item1.id,0)?'arrow-down':'arrow-right'" color="#A7AEBD" size="28" :customStyle="{transform: 'scale(.8)'}"></u-icon>
					</view>
				</view>
				<template v-for="item2 in item1.list" v-if="showItem(item1.id,0)">
					<view class="item-box item-box-area" :key="item2.id" @click="clickItem(item1.id+'-'+item2.id)">
						<view>{{item2.name||""}}</view>
						<view class="ico-box">
							<u-icon :name="showItem(item2.id,1)?'arrow-down':'arrow-right'" color="#A7AEBD" size="28"></u-icon>
						</view>
					</view>
					<template v-for="item3 in item2.list" v-if="showItem(item2.id,1)">
						<view class="item-box item-box-point" :key="item3.id" @click="clickPoint(item1,item2,item3)">
							<view>{{item3.name||""}}</view>
						</view>
					</template>
				</template>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import searchCom from "@/components/searchCom.vue"
	import { getLineSectionSiteTreeByLike, projectOrgTreeData, getPlanLineSectionSiteTreeByLike } from '@/api/comprehensive/comprehensive.js'
	// 请求的所有数据 
	let AllList = null;
	export default {
		data() {
			return {
				data: [],
				searchText: undefined,
				activeItem: "",
				selectedList:[],
				// 项目Id 项目筛选只展示提交的线路
				pmId:-1,
				projectType:undefined,
				// 过滤的线路id
				lineSiteSectionIds: []
			}
		},
		components: {
			searchCom
		},
		onLoad(option) {
			if(option && option.pmId){
				this.pmId = option.pmId;
				this.projectType = option.projectType
				this.getSiteList()
			}
			if (uni.getStorageSync("_temp_filter_lineSiteSectionIds")) {
				this.lineSiteSectionIds = uni.getStorageSync("_temp_filter_lineSiteSectionIds")
				uni.removeStorageSync("_temp_filter_lineSiteSectionIds")
			}
		},
		methods: {
			/**
			 * 输入框值变化的时候
			 * @param {String} val
			 */
			searchChange(val){
				this.searchText = val
			},
			/**
			 * 搜索框确认键触发
			 * @param {Object} ev
			 */
			determine(ev){
				this.searchText = ev
				this.getProjectSiteList(this.searchText)
			},
			clearVal() {
				this.searchText = null
				this.getProjectSiteList(this.searchText)
			},
			//点击工点项
			clickPoint(item1,item2,item3){
				this.$$emit(this.$config.ENV_SELECT_SITE,[item1,item2,item3]);
				uni.navigateBack({})
			},

			showItem(id,index=0) {
				let arr = this.activeItem.split("-")
				return arr[index]==id
			},
			//点击菜单父选项
			clickItem(str) {
				this.activeItem = String(str)	
			},
			/**
			 * 查询项目列表
			 */
			getProjectSiteList(keyWord = undefined){
				getPlanLineSectionSiteTreeByLike({pmId:this.pmId,keyWord,module:this.projectType}).then(res=>{
					// 过滤 - 排查不同的
					if (Array.isArray(this.lineSiteSectionIds) && this.lineSiteSectionIds.length) {
						const tempArray = res.result
						for (let i = 0; i < tempArray.length; i++) {
							if (Array.isArray(tempArray[i].list)) {
								for (let j = 0; j < tempArray[i].list.length; j++) {
									if (Array.isArray(tempArray[i].list[j].list)) {
										for (let k = 0; k < tempArray[i].list[j].list.length; k++) {
											if (!this.lineSiteSectionIds.includes(Number(tempArray[i].list[j].list[k].id))) {
												tempArray[i].list[j].list.splice(k--, 1)
											}
										}
										if (!tempArray[i].list[j].list.length) {
											tempArray[i].list.splice(j--, 1)
										}
									}
								}
								if (!tempArray[i].list.length) {
									tempArray.splice(i--, 1)
								}
							}
						}
						this.data = tempArray
					} else {
						this.data = res.result;
					}
					if(AllList === null){
						AllList = res.result
						console.log(AllList,'aioldhjfaio')
					}
				});
			},
			// 15.9.查询线路/区间/站点列表
			async getSiteList() {	
				console.log(this.pmId, '77爱说大话')
				// 如果是从项目列表进来， 不展示所有线路
				if(this.pmId !== -1){
					this.getProjectSiteList();
					return
				}
				//获取站点列表的入参  orgIds
				let resq = await projectOrgTreeData({})
				if(resq.success && resq.status == 1) {
					let resultOrg = resq.result[0].orgs.map(item => item.id)
					console.log(resultOrg, 'resultOrg')
					let lineList = await getLineSectionSiteTreeByLike({orgIds:resultOrg})
					this.data = lineList.result
					if(AllList === null){
						AllList = lineList.result
					}
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.hwq-content {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
	}
	.item-box {
		
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx;
		border-top: 1px solid #E2E5ED;
		
		&:first-child {
			border-top-width: 0;
		}

		.name {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #445469;
			line-height: 120rpx;
			border-bottom: 1px solid #E2E5ED;
		}
	}

	.item-box-area {
		padding-left: 30rpx;
	}

	.item-box-point {
		padding-left: 60rpx;
	}
</style>
